《高性能网站建设指南》阅读笔记_规则1-减少HTTP请求
发布时间:2013-11-22 浏览:154打印字号:大中小
序言:
可能很多人跟我们一样,一直以为性能主要是后端问题。但是这本书中的实例表明,前端问题可能消耗掉整体时间的80%到90%,而只有10%到20%的时间花在了下载HTML文档上。一般我们认为前端性能无非就是坚持使用外部的CSS和JS,尽量减少CSS和JS引用的数量,还有对JS的压缩。但是这本书告诉我们,我们要做的工作远不止这些。
本书按照优先级顺序介绍了14个性能规则。但是并非每个规则都要应用于每个网站,也不是每个网站都应该按照同一种方式运用一个规则,但是每个规则都值得考虑。
我们自己做了下实验:
百度:0.013/0.075=17% 0.014/0.040=35%
page speed 评分:99
淘车买车首页:0.699/7.559=9% 0.667/2.978=22%
page speed 评分:68
淘车网车源列表页:0.057/4.734=1.2% 0.055/2.112=2.6%
page speed 评分:84
二手车之家车源列表页:0.068/2.164=3% 0.063/1.183=5%
page speed 评分:82
我们的问题大概在一下这几个方面:
启用 Keep-Alive
由同一网址提供资源
将图片组合为 CSS贴图定位
优化图片
我们做到了:
暂缓 JavaScript解析
压缩 JavaScript
压缩 CSS
压缩 HTML
指定图片大小
将查询字符串从静态资源中删除
优化样式表和脚本的排列顺序
使用浏览器缓存
使目标网页重定向可缓存
内嵌小型 CSS
内嵌小型 JavaScript
启用压缩
将 CSS放在文档标头处
将图片组合为 CSS贴图定位
尽量减少请求的数据量
尽量减少重定向
指定字符集
请指定一个“Vary: Accept-Encoding”标头
请指定缓存验证工具
避免出现错误的请求
避免在 CSS中使用 @import
首选异步资源
下面是对以上提到的14条规则的具体介绍:
规则1-减少HTTP请求
既然有80%-90%的时间花在为HTML文档所引用的所有组建(图片,脚本,样式表,Flash等)进行的HTTP请求上,因此改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求数量。这是最重要的原则,如果14条规则里只能选一条,那就是它了.
图片地图:如果用图片做导航链接,我们们可以将多个图片完成的功能,使用一个图片,根据的不同区域来响应不应的请求。因为一个图片只有一次HTTP请求,而多个图片需要有多次请求。
CSS Sprites
原理同上,但比上面的更灵活
CSS Sprites方式处理例子:
.home{background-position:00;margin-right:4px;margin-lift:4px;}
书中的示例:
内联图片 是将简单图片的编码数据直接保存在URL自身之中。(需要内联编码技术)
合并脚本和样式表:每个文件都会导致一个HTP请求,尽量将css和js合并到一个文件中;
把原有的多个样式表文件合成一个,可以使用户在浏览网页时只需下载一个CSS文件。这样减少了HTTP请求,速度自然就快了些。Javascript文件也一样。不过这样做似乎不符合模块化的开发原则。